<template>
  <view>
    <!-- 头部轮播 -->
    <view class="carousel-section">
      <!-- 背景色区域 -->
      <!--  @change="swiperChange" -->
      <view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
      <swiper class="carousel" indicator-dots circular autoplay indicator-color='#000' indicator-active-color="#fff">
        <swiper-item v-for="(item,i) in myList" :key="i" class="carousel-item">
          <image :src="item.src" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 搜索 -->
    <view class="search paddiang">
      <view class="inpt">
        <text class="iconfont icon-search"></text>
        <input type="text" placeholder="20万+妹子说的话在这里搜索回复" />
      </view>
      <view class="btn">
        搜索
      </view>
    </view>
    <!-- 更新话术 -->
    <view class="update paddiang">
      <text>优选百万恋爱话术软件</text>
      <text style="color: #ff4682;">昨日更新话术631条</text>
    </view>

<view class="">
  <!-- 江湖救急 -->
  <view class="picture paddiang">
    <!-- 标题文字 -->
    <text>江湖救急</text>
    <!-- 图片 -->
    <view class="select">
      <view class="select-image">
        <image src="../../static/imag/kcb.png"></image>
      </view>
      <view class="select-image">
        <image src="../../static/imag/lmyy.png"></image>
      </view>
      <view class="select-image">
        <image src="../../static/imag/qsjw.png"></image>
      </view>
      <view class="select-image">
        <image src="../../static/imag/qdla.png"></image>
      </view>
    </view>
  </view>
  <!-- 温暖关怀 -->
  <view class="warmth paddiang">
    <!-- 标题 -->
    <view class="warmth-top">
      <view class="warmth-hint">
        <view class="warmth-view"></view>
        <view>温暖关怀</view>
      </view>
    </view>
    <!-- 显示 -->
    <view class="warmth-button">
      <text>风趣自如</text>
      <text>讲故事</text>
      <text>情感波动</text>
      <text>风趣自如</text>
    </view>
  </view>
</view>
 
   

    <!-- 温暖关怀 -->
    <view class="warmth paddiang">
      <!-- 标题 -->
      <view class="warmth-top">
        <view class="warmth-hint">
          <view class="warmth-view"></view>
          <view>暖心交流</view>
        </view>
      </view>
      <!-- 显示 -->
      <view class="warmth-button">
        <text>风趣自如</text>
        <text>讲故事</text>
        <text>情感波动</text>
        <text>风趣自如</text>
        <text>讲故事</text>

      </view>
    </view>

    <!-- 温暖关怀 -->
    <view class="warmth paddiang">
      <!-- 标题 -->
      <view class="warmth-top">
        <view class="warmth-hint">
          <view class="warmth-view"></view>
          <view>惯例学习</view>
        </view>
      </view>
      <!-- 显示 -->
      <view class="warmth-button">
        <text>风趣自如</text>
        <text>讲故事</text>
        <text>情感波动</text>
        <text>风趣自如</text>
        <text>讲故事</text>
        <text>情感波动</text>
      </view>
    </view>
    <!-- 自定义tabBar -->
    <TabBar tabIndex=1></TabBar>
  </view>
</template>

<script>
  import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
  export default {
    components: {
      TabBar
    },
    data() {
      return {
        myList: [{
          src: "../../static/imag/123.png"
        }, {
          src: "../../static/imag/123.png"
        }, {
          src: "../../static/imag/123.png"
        }],
        titleNViewBackground: '#ed6a71', //轮播图背景色

      };
    },
    onLoad() {

    },
    methods: {
      //轮播图切换修改背景色
      swiperChange(e) {
        const index = e.detail.current;
        this.swiperCurrent = index;
        this.titleNViewBackground = this.carouselList[index].bgcolor;
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .carousel-section {
    padding: 0;

    .carousel {
      .carousel-item {
        padding: 0;
      }
    }

    .swiper-dots {
      left: 45rpx;
      bottom: 40rpx;
    }
  }


  // 左右间距
  .paddiang {
    padding: 0 20rpx;
  }

  .picture {
    text {
      font-weight: 30rpx;
      font-weight: 700;
    }

    .select {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;

      .select-image {
        width: 170rpx;
        height: 190rpx;
      }
    }
  }

  // 温暖关怀
  .warmth {
    margin-top: 40rpx;

    .warmth-top {
      .warmth-hint {
        display: flex;
        align-items: center;
        font-weight: 700;

        .warmth-view {
          width: 7rpx;
          height: 30rpx;
          background-color: #fdd201;
          margin-right: 10rpx;

        }
      }
    }

    .warmth-button {
      display: flex;
      margin-top: 20rpx;
      flex-wrap: wrap;

      text {
        width: 30%;
        height: 80rpx;
        margin-top: 20rpx;
        background-color: #f4f4f4;
        display: flex;
        color: #2c2c2c;
        justify-content: center;
        align-items: center;
        border-radius: 16rpx;
        margin-right: 23rpx;

      }

    }
  }

  // 头部轮播图
  .carousel-section {
    position: relative;
    padding-top: 20rpx;


    .titleNview-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 326rpx;
      transition: 0.4s;
    }
  }

  .carousel {
    height: 330rpx;
    margin-top: 40rpx;

    .carousel-item {
      width: 100%;
      height: 100%;
      padding: 0 0upx;
      overflow: hidden;
    }

    image {
      width: 94%;
      margin: 0px 3%;
      height: 100%;
      border-radius: 10upx;
    }
  }

  // 更新话术
  .update {
    font-size: 28rpx;
    font-weight: 700;
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;

    text {
      display: block;
    }
  }

  // 搜索
  .search {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    // 输入框
    .inpt {
      width: 100%;
      height: 76rpx;
      color: #888;
      display: flex;
      align-items: center;

      input {
        width: 100%;
        height: 100%;
        margin-left: 20rpx;
      }
    }

    // 搜索按钮
    .btn {
      width: 150rpx;
      height: 76rpx;
      font-size: 30rpx;
      font-weight: 700;
      color: #fff;
      background-color: #fed028;
      border-radius: 40rpx;
      text-align: center;
      line-height: 76rpx;
    }
  }
</style>
